@{
    ViewBag.Title = "文本比较工具";
    ViewBag.keywords = "文本比较工具,文本比较,对比工具";
    ViewBag.description = "文本比较工具";var host = Appsettings.app("BaseFile:HostUrl");
   Layout = "_oayout";
}
@section Styles {<link rel="stylesheet" type="text/css" href="@host/lib/diffview/css/diffview.css"><style>#diffoutput{overflow:auto}.diff table td{ overflow:hidden;
  text-overflow:inherit;}</style>}
<div class="layui-row layui-form layui-form-pane">
    <input type="hidden" id="contextSize" value="">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">Base Text（基础文本）：</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入Base Text（基础文本）" id="baseText" name="content" rows="8" lay-verify="required" autocomplete="off" class="layui-textarea">www.ruovea.com</textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">New Text（对比文本）：</label>
        <div class="layui-input-block">
            <textarea placeholder="输出内容" id="newText" name="outtxt" rows="8" autocomplete="off" class="layui-textarea">my.ruovea.com</textarea>
        </div>
    </div>
     <div class="layui-inline" style="margin:10px auto;text-align:center; ">
        <label>查看方式：</label>
        <div class="layui-input-inline">
            <input type="radio" name="_viewtype" id="sidebyside">
            <label for="sidebyside">左右并排</label>
            <input type="radio" name="_viewtype" checked="checked" id="inline">
            <label for="inline">上下对比</label>
        </div>
        <div class="layui-input-inline">
             <a class="layui-btn enc" onclick="javascript:diffUsingJS();" style="margin-left:10px;">开始对比</a>
        </div>
    </div>

    <table border="0" id="table1"  style="width:100%;overflow-x:auto">
        <tr>
            <td>
                <a name="diff"> </a>
                <div id="diffoutput" style="width:100%;overflow-x:auto; "> </div>
            </td>
        </tr>
    </table>
</div>
@section Scripts {
<script type="text/javascript" src="@host/lib/diffview/js/dojo.js"></script>
<script type="text/javascript" src="@host/lib/diffview/js/diffview.js"></script>
<script type="text/javascript" src="@host/lib/diffview/js/difflib.js">
</script>
<script language="javascript">
     var url = window.location.toString().split("#")[0];
     dojo.require("dojo.io");
     function diffUsingJS() {
         var $ = dojo.byId;
         var base = difflib.stringAsLines($("baseText").value);
         var newtxt = difflib.stringAsLines($("newText").value);
         var sm = new difflib.SequenceMatcher(base, newtxt);
         var opcodes = sm.get_opcodes();
         var diffoutputdiv = $("diffoutput");
         while (diffoutputdiv.firstChild)
             diffoutputdiv.removeChild(diffoutputdiv.firstChild);

         var contextSize = $("contextSize").value;
         contextSize = contextSize ? contextSize : null;
         diffoutputdiv.appendChild(diffview.buildView({
             baseTextLines: base,
             newTextLines: newtxt,
             opcodes: opcodes,
             baseTextName: "Base Text",
             newTextName: "New Text",
             contextSize: contextSize,
             viewType: $("inline").checked ? 1 : 0}));

         window.location = url + "#diff";
     }
</script>
}